<template>
  <div class="quiz">
    <div>
      <h1>MBTI职业性格测试</h1>
      <div>
        <div>
          <el-progress :percentage="percentage" :color="customColor">
            <p>{{ q }}/93</p>
          </el-progress>
        </div>
        <div class="quizDesc">
          <h2>{{ id }}.{{ describe }}</h2>
        </div>
        <div>
          <button class="button" @click="changeA" label="A">{{ optionA }}</button>
          <br><br><br>
          <button class="button" @click="changeB" label="B">{{ optionB }}</button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>

import { useRouter } from 'vue-router'
import { reactive, getCurrentInstance, toRefs, ref } from 'vue'
export default {
  setup() {

    const customColor = ref('#1e1384')
    const { proxy } = getCurrentInstance()//取到全局属性和方法
    const q = ref(1)
    const percentage = ref(1)
    const router = useRouter()


    var arr = []
    for (var i = 1; i < 94; i++) {
      arr.push(i + '')
    }

    var selection = []
    



    var id = ref('1')
    var describe = ref('你通常')
    var optionA = ref('A与人容易混熟')
    var optionB = ref('B比较沉静或矜持')
    var answerA = ref('E')
    var answerB = ref('I')
    selection.push(id.value +"."+ optionA.value + "")



    var i = 0

    var E = 0
    var I = 0
    var S = 0
    var N = 0
    var T = 0
    var F = 0
    var J = 0
    var P = 0
    var result = ""


    const changeA = async () => {
      i++

      if (answerA.value == 'E') {
        E++
      }

      if (answerA.value == 'I') {
        I++
      }

      if (answerA.value == 'S') {
        S++
      }

      if (answerA.value == 'N') {
        N++
      }

      if (answerA.value == 'T') {
        T++
      }

      if (answerA.value == 'F') {
        F++
      }

      if (answerA.value == 'J') {
        J++
      }

      if (answerA.value == 'P') {
        P++
      }

      const obj = {
        quizId: arr[i]
      }

     const obj_result = {
        MBTIcode:        "",
        time:           Date(),
        StudentID:      localStorage.getItem('sno'),
        StudentName:    localStorage.getItem('name'),
        StudentClass:   localStorage.getItem('class'),
        
      }



      try {

        
        const quizres = await new proxy.$request(proxy.$urls.m().quiz, obj).modepost()
        if (quizres.status == 200) {
          // console.log(quizres)
          id.value = quizres.data.quizId
          describe.value = quizres.data.QuizDescribe
          optionA.value = quizres.data.QuizOption_A
          optionB.value = quizres.data.QuizOption_B
          answerA.value = quizres.data.A_answer
          selection.push(id.value +"."+ optionA.value + "")

        }
      } catch (e) {
        const obj_answer = {
          time:     obj_result.time,
          answer_1: selection[0],
          answer_2: selection[1],
          answer_3: selection[2],
          answer_4: selection[3],
          answer_5: selection[4],
          answer_6: selection[5],
          answer_7: selection[6],
          answer_8: selection[7],
          answer_9: selection[8],
          answer_10: selection[9],
          answer_11: selection[10],
          answer_12: selection[11],
          answer_13: selection[12],
          answer_14: selection[13],
          answer_15: selection[14],
          answer_16: selection[15],
          answer_17: selection[16],
          answer_18: selection[17],
          answer_19: selection[18],
          answer_20: selection[19],
          answer_21: selection[20],
          answer_22: selection[21],
          answer_23: selection[22],
          answer_24: selection[23],
          answer_25: selection[24],
          answer_26: selection[25],
          answer_27: selection[26],
          answer_28: selection[27],
          answer_29: selection[28],
          answer_30: selection[29],
          answer_31: selection[30],
          answer_32: selection[31],
          answer_33: selection[32],
          answer_34: selection[33],
          answer_35: selection[34],
          answer_36: selection[35],
          answer_37: selection[36],
          answer_38: selection[37],
          answer_39: selection[38],
          answer_40: selection[49],
          answer_41: selection[40],
          answer_42: selection[41],
          answer_43: selection[42],
          answer_44: selection[43],
          answer_45: selection[44],
          answer_46: selection[45],
          answer_47: selection[46],
          answer_48: selection[47],
          answer_49: selection[48],
          answer_50: selection[49],
          answer_51: selection[50],
          answer_52: selection[51],
          answer_53: selection[52],
          answer_54: selection[53],
          answer_55: selection[54],
          answer_56: selection[55],
          answer_57: selection[56],
          answer_58: selection[57],
          answer_59: selection[58],
          answer_60: selection[59],
          answer_61: selection[60],
          answer_62: selection[61],
          answer_63: selection[62],
          answer_64: selection[63],
          answer_65: selection[64],
          answer_66: selection[65],
          answer_67: selection[66],
          answer_68: selection[67],
          answer_69: selection[68],
          answer_70: selection[69],
          answer_71: selection[70],
          answer_72: selection[71],
          answer_73: selection[72],
          answer_74: selection[73],
          answer_75: selection[74],
          answer_76: selection[75],
          answer_77: selection[76],
          answer_78: selection[77],
          answer_79: selection[78],
          answer_80: selection[79],
          answer_81: selection[80],
          answer_82: selection[81],
          answer_83: selection[82],
          answer_84: selection[83],
          answer_85: selection[84],
          answer_86: selection[85],
          answer_87: selection[86],
          answer_88: selection[87],
          answer_89: selection[88],
          answer_90: selection[89],
          answer_91: selection[90],
          answer_92: selection[91],
          answer_93: selection[92],
        
        }

        obj_result.MBTIcode = result
        console.log(obj_answer)
        await new proxy.$request(proxy.$urls.m().MBTI_result, obj_result).modepost()
        const res_selection = await new proxy.$request(proxy.$urls.m().ALL_selection, obj_answer).modepost()
        console.log(res_selection)
        if (result == "ISTJ") {
          router.push({
            path: '/ISTJ'
          })
        }

        if (result == "ISFJ") {
          router.push({
            path: '/ISFJ'
          })
        }

        if (result == "INTJ") {
          router.push({
            path: '/INTJ'
          })
        }

        if (result == "INFJ") {
          router.push({
            path: '/INFJ'
          })
        }

        if (result == "ISTP") {
          router.push({
            path: '/ISTP'
          })
        }

        if (result == "ISFP") {
          router.push({
            path: '/ISFP'
          })
        }

        if (result == "INFP") {
          router.push({
            path: '/INFP'
          })
        }

        if (result == "INTP") {
          router.push({
            path: '/INTP'
          })
        }

        if (result == "ESTP") {
          router.push({
            path: '/ESTP'
          })
        }

        if (result == "ESFP") {
          router.push({
            path: '/ESFP'
          })
        }

        if (result == "ENFP") {
          router.push({
            path: '/ENFP'
          })
        }

        if (result == "ENTP") {
          router.push({
            path: '/ENTP'
          })
        }

        if (result == "ESTJ") {
          router.push({
            path: '/ESTJ'
          })
        }

        if (result == "ESFJ") {
          router.push({
            path: '/ESFJ'
          })
        }

        if (result == "ENFJ") {
          router.push({
            path: '/ENFJ'
          })
        }

        if (result == "ENTJ") {
          router.push({
            path: '/ENTJ'
          })
        }
      }

      percentage.value += 1.075
      q.value += 1
      if (percentage.value > 100) {
        percentage.value = 93
        q.value = 93
      }

      var a, b, c, d = ""
      if (E >= I) {
        a = "E"
      } else {
        a = "I"
      }

      if (S >= N) {
        b = "S"
      } else {
        b = "N"
      }

      if (T >= F) {
        c = "T"
      } else {
        c = "F"
      }

      if (J >= P) {
        d = "J"
      } else {
        d = "P"
      }

      result = a + b + c + d

   
    }



    const changeB = async () => {
      i++

      if (answerB.value == 'E') {
        E++
      }

      if (answerB.value == 'I') {
        I++
      }

      if (answerB.value == 'S') {
        S++
      }

      if (answerB.value == 'N') {
        N++
      }

      if (answerB.value == 'T') {
        T++
      }

      if (answerB.value == 'F') {
        F++
      }

      if (answerB.value == 'J') {
        J++
      }

      if (answerB.value == 'P') {
        P++
      }

      const obj = {
        quizId: arr[i]
      }


       const obj_result = {
        MBTIcode:        "",
        time:           Date(),
        StudentID:      localStorage.getItem('sno'),
        StudentName:    localStorage.getItem('name'),
        StudentClass:   localStorage.getItem('class'),
        
      }

      try {
        console.log(obj)
        const quizres = await new proxy.$request(proxy.$urls.m().quiz, obj).modepost()
        
        if (quizres.status == 200) {
          console.log(quizres)
          id.value = quizres.data.quizId
          describe.value = quizres.data.QuizDescribe
          optionA.value = quizres.data.QuizOption_A
          optionB.value = quizres.data.QuizOption_B
          answerB.value = quizres.data.B_answer
          selection.push(id.value +"."+ optionB.value + "")
        }
      } catch (e) { 
        // console.log("完成")
        const obj_answer = {
          time:     obj_result.time,
          answer_1: selection[0],
          answer_2: selection[1],
          answer_3: selection[2],
          answer_4: selection[3],
          answer_5: selection[4],
          answer_6: selection[5],
          answer_7: selection[6],
          answer_8: selection[7],
          answer_9: selection[8],
          answer_10: selection[9],
          answer_11: selection[10],
          answer_12: selection[11],
          answer_13: selection[12],
          answer_14: selection[13],
          answer_15: selection[14],
          answer_16: selection[15],
          answer_17: selection[16],
          answer_18: selection[17],
          answer_19: selection[18],
          answer_20: selection[19],
          answer_21: selection[20],
          answer_22: selection[21],
          answer_23: selection[22],
          answer_24: selection[23],
          answer_25: selection[24],
          answer_26: selection[25],
          answer_27: selection[26],
          answer_28: selection[27],
          answer_29: selection[28],
          answer_30: selection[29],
          answer_31: selection[30],
          answer_32: selection[31],
          answer_33: selection[32],
          answer_34: selection[33],
          answer_35: selection[34],
          answer_36: selection[35],
          answer_37: selection[36],
          answer_38: selection[37],
          answer_39: selection[38],
          answer_40: selection[49],
          answer_41: selection[40],
          answer_42: selection[41],
          answer_43: selection[42],
          answer_44: selection[43],
          answer_45: selection[44],
          answer_46: selection[45],
          answer_47: selection[46],
          answer_48: selection[47],
          answer_49: selection[48],
          answer_50: selection[49],
          answer_51: selection[50],
          answer_52: selection[51],
          answer_53: selection[52],
          answer_54: selection[53],
          answer_55: selection[54],
          answer_56: selection[55],
          answer_57: selection[56],
          answer_58: selection[57],
          answer_59: selection[58],
          answer_60: selection[59],
          answer_61: selection[60],
          answer_62: selection[61],
          answer_63: selection[62],
          answer_64: selection[63],
          answer_65: selection[64],
          answer_66: selection[65],
          answer_67: selection[66],
          answer_68: selection[67],
          answer_69: selection[68],
          answer_70: selection[69],
          answer_71: selection[70],
          answer_72: selection[71],
          answer_73: selection[72],
          answer_74: selection[73],
          answer_75: selection[74],
          answer_76: selection[75],
          answer_77: selection[76],
          answer_78: selection[77],
          answer_79: selection[78],
          answer_80: selection[79],
          answer_81: selection[80],
          answer_82: selection[81],
          answer_83: selection[82],
          answer_84: selection[83],
          answer_85: selection[84],
          answer_86: selection[85],
          answer_87: selection[86],
          answer_88: selection[87],
          answer_89: selection[88],
          answer_90: selection[89],
          answer_91: selection[90],
          answer_92: selection[91],
          answer_93: selection[92],
        
        }
        console.log(obj_answer)
        obj_result.MBTIcode = result
        await new proxy.$request(proxy.$urls.m().MBTI_result, obj_result).modepost()
        const res_selection = await new proxy.$request(proxy.$urls.m().ALL_selection, obj_answer).modepost()
        console.log(res_selection)
        console.log(obj_result)
        if (result == "ISTJ") {
          router.push({
            path: '/ISTJ'
          })
        }

        if (result == "ISFJ") {
          router.push({
            path: '/ISFJ'
          })
        }

        if (result == "INTJ") {
          router.push({
            path: '/INTJ'
          })
        }

        if (result == "INFJ") {
          router.push({
            path: '/INFJ'
          })
        }

        if (result == "ISTP") {
          router.push({
            path: '/ISTP'
          })
        }

        if (result == "ISFP") {
          router.push({
            path: '/ISFP'
          })
        }

        if (result == "INFP") {
          router.push({
            path: '/INFP'
          })
        }

        if (result == "INTP") {
          router.push({
            path: '/INTP'
          })
        }

        if (result == "ESTP") {
          router.push({
            path: '/ESTP'
          })
        }

        if (result == "ESFP") {
          router.push({
            path: '/ESFP'
          })
        }

        if (result == "ENFP") {
          router.push({
            path: '/ENFP'
          })
        }

        if (result == "ENTP") {
          router.push({
            path: '/ENTP'
          })
        }

        if (result == "ESTJ") {
          router.push({
            path: '/ESTJ'
          })
        }

        if (result == "ESFJ") {
          router.push({
            path: '/ESFJ'
          })
        }

        if (result == "ENFJ") {
          router.push({
            path: '/ENFJ'
          })
        }

        if (result == "ENTJ") {
          router.push({
            path: '/ENTJ'
          })
        }
      }

      percentage.value += 1.075
      q.value += 1
      if (percentage.value > 100) {
        percentage.value = 93
        q.value = 93
      }
      var a, b, c, d = ""
      if (E >= I) {
        a = "E"
      } else {
        a = "I"
      }

      if (S >= N) {
        b = "S"
      } else {
        b = "N"
      }

      if (T >= F) {
        c = "T"
      } else {
        c = "F"
      }

      if (J >= P) {
        d = "J"
      } else {
        d = "P"
      }

      result = a + b + c + d

    }
    return { customColor, proxy, id, describe, optionA, optionB, percentage, q, changeB, changeA, result, E, I, S, N, T, F, J, P }
  }
}

</script>


<style >
.text {

  color: rgb(7, 7, 7);
  text-align: center;
}

.demo-progress .el-progress--line {
  margin-bottom: 50px;
  width: 200px;
  stroke-width: 5000;
}

.backgrouud {
  text-align: center;
}

.button {
  width: 800px;
  height: 80px;
  display: block;
  margin: 0 auto;
  color: black;
  border: 2px solid whitesmoke;
  border-radius: 15px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.quizDesc {
  text-align: center;
}
</style>
